<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" style="height:100%;">
<head>
	<title>要員調整資料検索</title>

	<jsp:include page="../basePage/head.jsp" />	 
    <script src="./js/util/globalajaxevent.js"></script>
	
	<style>
		    .ui-datepicker-calendar {display: none;}
   	</style>
 <script>
 
 
	
	 $(function() {		
		
		 var exportExcel = '${exportExcel}';
		if (exportExcel=='true'){
			$('#buttonExport').show(); 
		}else{ 
			$('#buttonExport' ).hide();
		}
		 
		//设置默认日期 datepickerUtil.js
		//开始日期：上个月 结束日期 当前日期
		var d = new Date();	
		var fromDate =	(d.getFullYear() -1 ) +'-'+ '12'   + '-1';	
		 fromDate = formatDate( fromDate).substring(0,7);
	
		
		 var toDate =	(d.getFullYear()  ) +'-'+ '12'   + '-1';	
		 toDate = formatDate( toDate).substring(0,7);
		
		
		
		//日期选择框格式化 		
		 initDatepicker('dateFrom',fromDate);
		 initDatepicker('dateTo',toDate);
	 	 
 	
		//日期选择框格式化
 		$( "#dateFrom" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);;
		$( "#dateTo" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(toDate);  
		 
		 
 		      	
		$( "#buttonSearch" ).button().click(function( event ) {	 
	 
		$('#EmpAdjustBaseInfoTable').empty();
		document.getElementById("UtilizaInfo").style.display="none";

		 	
		$.ajax({
			        type: "POST",
			        async: true,
			        url:"empAdjustBaseInfoQuery!refreshData.action",
			        data:$('#dataForm').serialize(),
			        

					success: function (data) {
						if(data == null ||
						   data.length==0 || 
						   data.tableData.EmpAdjustBaseInfoTable.length ==0  ){
							
							 $( "#noResult" ).dialog({modal:true});
							return;
						}
						else
						{
						document.getElementById("UtilizaInfo").style.display="block";
						}
	
					 
						outputGrid('EmpAdjustBaseInfoTable',data.tableData.EmpAdjustBaseInfoTable,"要員調整情報");
						 	
						var divWidth=$("#EmpAdjustBaseInfoTable").width();
						
						$("#EmpAdjustBaseInfoTable_datagrid").setGridWidth(divWidth);
						
						
					},
			        error: function (err) {
						alert(err);
			        }
				});
		 });
		
 		
		$( "#buttonExport").button().click(function( event ) {
			
			$('#dataForm').attr('action',"empAdjustBaseInfoExport!export.action").submit();
		});
		
	});	 
	
	 
	 function outputGrid(target,data,caption){		
	  		$('#' + target ).empty();  		  	
			if(data == null || data.length==0  ) return;
			
	   		var row =[];
			for(var i=0;i<data.length  ;i++){				 							
				row.push($("<tr></tr>"));				 
			}  ;
			
		   	$('#' + target).empty().append('<table style="float:inherit" id=' + target + '_datagrid><tbody></tbody></table>');
			var table = $('#' + target + ' tbody');

		    var j=0;
	  		$.each(data,function(key,value){
	  			var index=0;
	  			$.each(value,function(k,v){  			  			
	  				var th = $("<th id =" + index + " nowrap='nowrap'></th>");
	  				var td = $("<td nowrap='nowrap'></td>");  		
	  	  		    if (j ==0 ){		
						th.append(v);
	  	  	        	th.appendTo(row[j]);
	  	  	        }
	  	  		    else{					  	  				
	  	  				td.append(v);
	  	  				td.appendTo(row[j]);
	  	  		    }
	  	  	    	index++;
	  			});  			
	  			j++;
	  		});
	  		for(var i=0;i<row.length;i++){
	  			row[i].appendTo(table);			
			};		

		 //set column width	
		  var ColModel='';
		  var Colwidth = 0;
		  var align ="left";
		  var hidden = "false";
		  for(var i=0;i<data[0].length  ;i++){				 							
		   if ( ColModel.length>0){
			   ColModel += ',';} 
		       
		   	hidden = "false";
		   
			   if (i==0){
		    	   Colwidth = 20;
		    	   hidden = "true";
		       } else if (i==1){
		    	   Colwidth = 70;
		    	   align ="center";
		       } else if (i==2){
		    	   Colwidth =150;
		    	   align ="left";
		       } else if (i==3){
		    	   Colwidth =100;
		    	   align ="left";
		       } else if (i==4){
		    	   Colwidth =100;
		    	   align ="left";
		       } else{
		    	   Colwidth = 55;
		    	   align ="right";
		       }
		  
			   ColModel += '{name:"' +i +'", index: "' + i+ '", width: ' + Colwidth+', align: "' + align +'",sortable:false,hidden: ' + hidden+'   } '; 
		  }  ;
			//alert(ColModel);	
	  		//tableToGrid(target + ' table',{
  	  	   tableToGrid('#' + target+"_datagrid",{
	  			//datatype: "local",  
	  			autoWidth:true,	  			
	  			height: "100%",           	  	
	         	caption: caption,	         
	         	colModel:eval("([" + ColModel + "])"),
				shrinkToFit: false				
				 ,gridComplete:function(){				
					  formatTable(target);
				 }
  	  	 
  	  	   
	  		  });   
  	  	   
  	 
  	  	
		};	
	function formatTable(target){ 		  		  	
		$('#' + target + '_datagrid tr').each(function(){ 
  		 
  		   
  		 	var v=$.trim( $(this).children("td").eq(0).text());
  		 	
  		 	  
			if (v.match("^Reserve")   ){	    		
				
				//$(this).children("td").css("background", "#FFFFCC");
				$(this).children("td").eq(5).prevAll().css("background", "#FFFFCC");
				if (v =="Reserve_TotalCount")
					$(this).children("td").eq(4).nextAll().css("color", "#FF6600");
			}
			  else if ( v.match("^Reality" )  ){
				//$(this).children("td").css("background", "#CCCCFF");
				  $(this).children("td").eq(5).prevAll().css("background", "#CCCCFF");
			}
			else if   ( v.match("^Regulation" )  ){
				//$(this).children("td").css("background", "#FFFFCC");
				$(this).children("td").eq(5).prevAll().css("background", "#FFFFCC");
			}  
				
			$(this).children("td").filter(function(index) {    				  					
				return $.trim( $(this).text()) =='-' ;  				  				
			}).css('color', '#DDDDDD');
			
			//customer tooltip
			//$(this).children("td").eq(1).attr("title", "customer tooltip");
		});
		
	 
  	};
  	
  
       
	</script>

</head>
<body>

<s:form id="dataForm" theme="simple" >			
	<table style="white-space:nowrap">
		<tr>
		 	<th>時間帯</th><td><s:textfield id="dateFrom" name="dateFrom" key="value" label="开始日" cssClass="datebox" /></td>				
			<th>～</th><td><s:textfield id="dateTo" name="dateTo" key="value" label="结束日"  cssClass="datebox" /></td>
			<td width=30></td>
			<td><a id="buttonSearch" href="#" id="buttonSearch" class="button">検索</a></td>		
			<td><a id="buttonExport" href="#" style="width:100px" class="button"  >エクスポート</a></td>	
			<td>
				<span id="myIndicator"  >
					<img  width=25 height=20 src="./img/ajax-loader.gif" alt="ロード中..." />ロード中....
				</span>
			 </td>		
		</tr>
	</table>
</s:form>
<hr>
<div id="dataContainer" style="position:absolute;overflow: auto!important;top:35px;bottom:0px;width:100%;">  
 	<div id="EmpAdjustBaseInfoTable"  class="grid">	</div>
 	
 	 <div id="UtilizaInfo" style="margin-left:26px; font-size:10pt; display:none;">
 	 	<table style="color:#333333;">
 	 	<tr><th colspan="2" style="text-align:left;font-size:11pt;">※要員状況稼働率(算出方法):</th></tr>
		<tr><th nowrap='nowrap' style="width:100px;">稼働率(全員):</th><td>総入力時間「ジョブダウンロッド、アップロッド時間が含む」÷全員(新規等本番対応しないOP含む)総出勤時間「食事、休憩、私用休暇除き」</td></tr>
		<tr><th nowrap='nowrap'>稼働率(Unit):</th><td>総入力時間「ジョブダウンロッド、アップロッド時間が含む」÷全員(新規等本番対応しないOP含まない)総出勤時間「食事、休憩、私用休暇除き」</td></tr>
		<tr><th nowrap='nowrap'>稼働率(全工程):</th><td>EOP総(ABCDE工程)入力時間「ジョブダウンロッド、アップロッド時間が含む」÷EOP総出勤時間「食事、休憩」</td></tr>
		<tr><th nowrap='nowrap'>稼働率(E工程):</th><td>EOP総(E工程)入力時間「ジョブダウンロッド、アップロッド時間が含む」÷EOP総出勤時間「食事、休憩」</td></tr>
		</table>
	</div>
 	  
 	<div id="noResult" title="メッセージ" style="display:none;">
 		 <p>该当する検索结果がありません。</p>
         <p>别の条件でもう一度検索してください。</p>
	</div>
 	
</div>
</body>
</html>